<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图立得照片图片裁剪工具使用说明书</title>
<style>
body { font-family: 'Inter', 'Microsoft YaHei', sans-serif; }
.feature-table th { background-color: #f3f4f6; padding: 12px; font-weight: 600; text-align: left; }
.feature-table td { padding: 12px; border-top: 1px solid #e5e7eb; }
.feature-table tr:nth-child(even) { background-color: #f9fafb; }
.step-code {
display: inline-block;
padding: 2px 6px;
background-color: #e5e7eb; /* Light gray for button/code appearance */
border-radius: 4px;
font-family: monospace;
font-size: 0.9em;
color: #1f2937;
font-weight: 500;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen p-4 sm:p-8">
<div class="max-w-4xl mx-auto bg-white shadow-xl rounded-lg p-6 sm:p-10 border border-gray-200">
<h1 class="text-3xl sm:text-4xl font-extrabold text-blue-600 mb-6 border-b-4 border-blue-100 pb-2">
图立得照片图片裁剪工具 使用说明书
</h1>
<!-- 1. 工具简介 -->
<section class="mb-8">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-4 pt-4">1. 工具简介</h2>
<p class="text-lg leading-relaxed text-gray-600">
本工具是一款基于 HTML5 Canvas 实现的网页版图片裁剪应用。它允许用户上传图片，通过拖动、缩放和旋转等操作精确定义裁剪区域，并可按需设置输出尺寸和比例，最后导出高质量的裁剪结果图。
</p>
</section>
<!-- 2. 主要功能 (Features) -->
<section class="mb-8">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-4 pt-4">2. 主要功能 (Features)</h2>
<div class="overflow-x-auto shadow-md rounded-lg">
<table class="min-w-full feature-table text-sm">
<thead>
<tr>
<th class="w-1/4">功能模块</th>
<th class="w-3/4">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>**图片选择**</td>
<td>上传本地图片文件（支持 JPG/PNG 等常见格式）。</td>
</tr>
<tr>
<td>**尺寸预设**</td>
<td>提供如 1 寸、2 寸、大 1 寸、护照、头像等常用尺寸预设，方便快速设置。</td>
</tr>
<tr>
<td>**自定义尺寸**</td>
<td>允许用户手动输入所需的输出宽度（W）和高度（H），单位为像素（px）。</td>
</tr>
<tr>
<td>**比例锁定**</td>
<td>可锁定裁剪框的宽高比例，确保裁剪区域与目标输出尺寸保持一致。</td>
</tr>
<tr>
<td>**图像变换**</td>
<td>支持图片的左转、右转（旋转 90 度）、水平翻转和垂直翻转操作。</td>
</tr>
<tr>
<td>**裁剪区域调整**</td>
<td>支持鼠标拖动裁剪框的中心进行移动，或拖动四边的中心手柄进行尺寸调整。</td>
</tr>
<tr>
<td>**结果缩放**</td>
<td>允许对最终裁剪结果进行百分比缩放，以生成所需分辨率的图片。</td>
</tr>
<tr>
<td>**可靠下载**</td>
<td>最终结果图以 Base64 Data URL 形式展示在预览区，支持<span class="step-code">“下载结果图”</span>按钮下载，或在预览图上右键“图片另存为”。</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- 3. 操作步骤 (How to Use) -->
<section class="mb-8">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 mb-6 pt-4">3. 操作步骤 (How to Use)</h2>
<!-- 步骤 1: 上传图片 -->
<div class="mb-6 border-l-4 border-blue-400 pl-4">
<h3 class="text-xl font-semibold text-gray-700 mb-2">步骤 1: 上传图片</h3>
<ol class="list-decimal list-inside space-y-2 text-gray-600">
<li>点击左上角的 <span class="step-code">📁 选择图片</span> 按钮。</li>
<li>在弹出的文件选择窗口中，选择你想要裁剪的本地图片文件。</li>
<li>图片加载后，将显示在左侧的编辑区域。</li>
</ol>
</div>
<!-- 步骤 2: 设置输出尺寸和比例 -->
<div class="mb-6 border-l-4 border-blue-400 pl-4">
<h3 class="text-xl font-semibold text-gray-700 mb-2">步骤 2: 设置输出尺寸和比例</h3>
<ol class="list-decimal list-inside space-y-2 text-gray-600">
<li>**使用预设尺寸**：在 <span class="step-code">预设尺寸</span> 下拉菜单中选择一个标准尺寸，例如“1寸 (295x413)”。</li>
<li>**使用自定义尺寸**：如果预设尺寸不满足需求，选择“自定义”，然后在 <span class="step-code">输出W</span> 和 <span class="step-code">H</span> 旁边的输入框中填入你想要的最终输出像素宽度和高度。</li>
<li>
**锁定比例**：
<ul class="list-disc list-inside ml-5 mt-1 space-y-1">
<li>默认情况下，<span class="step-code">锁定比例</span> 复选框是勾选的。这意味着你调整裁剪框大小时，其宽高比将始终与设定的输出 W/H 保持一致。</li>
<li>如果需要自由调整裁剪框的比例，请取消勾选此选项。</li>
</ul>
</li>
</ol>
</div>
<!-- 步骤 3: 调整裁剪区域 -->
<div class="mb-6 border-l-4 border-blue-400 pl-4">
<h3 class="text-xl font-semibold text-gray-700 mb-2">步骤 3: 调整裁剪区域</h3>
<ol class="list-decimal list-inside space-y-2 text-gray-600">
<li>**移动**：在裁剪框（虚线框）内部按住鼠标左键（或单指触摸），拖动裁剪框到你想要的位置。</li>
<li>
**调整大小**：将鼠标指针悬停在裁剪框的**四边中点**（显示为白色方块）上，当光标变为方向箭头时，拖动即可调整裁剪框的大小。
<ul class="list-disc list-inside ml-5 mt-1 space-y-1">
<li>如果“锁定比例”已勾选，调整大小时将保持宽高比例不变。</li>
</ul>
</li>
<li>**实时预览**：当你移动或调整裁剪框时，右侧的“下载结果图”下方的区域会实时显示裁剪后的效果。</li>
</ol>
</div>
<!-- 步骤 4: 图像变换（可选） -->
<div class="mb-6 border-l-4 border-blue-400 pl-4">
<h3 class="text-xl font-semibold text-gray-700 mb-2">步骤 4: 图像变换（可选）</h3>
<p class="text-gray-600 mb-2">如果原始图片方向不正确或需要特殊效果，你可以使用以下按钮：</p>
<ul class="list-disc list-inside ml-5 space-y-1 text-gray-600">
<li><span class="step-code">↺</span> (左转)：将图片逆时针旋转 90 度。</li>
<li><span class="step-code">↻</span> (右转)：将图片顺时针旋转 90 度。</li>
<li><span class="step-code">⇆</span> (水平翻转)：将图片沿垂直轴镜像翻转。</li>
<li><span class="step-code">⇅</span> (垂直翻转)：将图片沿水平轴镜像翻转。</li>
</ul>
</div>
<!-- 步骤 5: 调整最终缩放（可选） -->
<div class="mb-6 border-l-4 border-blue-400 pl-4">
<h3 class="text-xl font-semibold text-gray-700 mb-2">步骤 5: 调整最终缩放（可选）</h3>
<p class="text-gray-600 mb-2">在 <span class="step-code">缩放</span> 输入框中，你可以设置最终裁剪结果相对于原始裁剪像素的百分比缩放值：</p>
<ul class="list-disc list-inside ml-5 space-y-1 text-gray-600">
<li>例如，如果裁剪框大小为 500x500 像素：</li>
<ul class="list-circle list-inside ml-10 text-gray-500">
<li>输入 <span class="step-code">100</span>（默认），则最终输出 500x500 像素。</li>
<li>输入 <span class="step-code">200</span>，则最终输出 1000x1000 像素（放大一倍）。</li>
<li>输入 <span class="step-code">50</span>，则最终输出 250x250 像素（缩小一半）。</li>
</ul>
</ul>
</div>
<!-- 步骤 6: 下载结果图 -->
<div class="mb-6 border-l-4 border-blue-400 pl-4">
<h3 class="text-xl font-semibold text-gray-700 mb-2">步骤 6: 下载结果图</h3>
<ol class="list-decimal list-inside space-y-2 text-gray-600">
<li>调整完成后，在右侧预览区确认效果。</li>
<li>**方法一 (按钮下载)**：点击 <span class="step-code">⬇ 下载结果图</span> 按钮，文件将以 <span class="step-code">cropped_img_...pct.jpg</span> 的格式自动下载到你的本地设备。</li>
<li>**方法二 (右键另存为)**：在结果图预览区域（即显示的裁剪后的图片）上点击鼠标右键，选择 **“图片另存为”** 即可保存图片。</li>
</ol>
</div>
</section>
</div>
</body>
</html>